import { reactive } from 'vue';

export const todoState = reactive({
  todoText: '',
  todoData: []
});

export const addTodo = () => {
  if (!todoState.todoText.length) return;
  todoState.todoData.push({
    id: new Date().getTime(),
    content: todoState.todoText,
    completed: false
  });
  todoState.todoText = '';
};

export const toggleTodo = (id) => {
  todoState.todoData = todoState.todoData.map((todo) => {
    if (todo.id === id) {
      todo.completed = !todo.completed;
    }
    return todo;
  });
};

export const removeTodo = (id) => {
  todoState.todoData = todoState.todoData.filter((todo) => todo.id !== id);
};
